<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useConfigStore } from '@/stores/modules/config'

const siteMotto = useConfigStore().siteMotto
const isPortrait = ref(isOrientationPortrait())

onMounted(() => {
  window.addEventListener('resize', () => {
    isPortrait.value = isOrientationPortrait()
  })
})

/**
 * 检测设备的屏幕方向（横向或纵向）
 * portrait 纵向 landscape 横向
 */
function checkOrientation() {
  if (window.matchMedia('(orientation: portrait)').matches) {
    return 'portrait'
  } else if (window.matchMedia('(orientation: landscape)').matches) {
    return 'landscape'
  }
}

/** 是否竖屏 */
function isOrientationPortrait() {
  return checkOrientation() === 'portrait'
}
</script>

<template>
  <p :class="['motto', { vertical: isPortrait }]">{{ siteMotto }}</p>
</template>

<style lang="less" scoped>
@font-face {
  font-family: '字魂仙剑奇侠体';
  src: url(/title_ttf/字魂仙剑奇侠体.ttf);
  font-display: swap;
}

.motto {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: 字魂仙剑奇侠体;
  color: #fff;
  font-size: 3.2vw;
  text-shadow: 0 0 16px #000;
  &.vertical {
    writing-mode: vertical-rl;
    font-size: 3.2vh;
  }
}
</style>
